<template>
  <div class="ProdcutList">
        <index-header></index-header>
        <div class="bg">
             <div class="input">
                <input type="text" placeholder="请输入搜索关键词">
                <img class="search" src="@/assets/productlist/serch.png" alt="">
            </div>
        </div>
        <div class="tab-body">
            <div class="tab-item item " 
            :class="{active:active[0]}" 
            @click="tab(0)">综合</div>
            <div class="tab-item item" 
            :class="{active:active[1]}" 
            @click="tab(1)">最新</div>
           
            <select name="" id="" class="item">
                <option value="">风格分类</option>
                <option value="">现代简约</option>
                <option value="">欧式风格</option>
            </select>
             <select name="" id="" class="item">
                <option value="">经验</option>
                <option value="">0-5年</option>
                <option value="">5-10年</option>
                <option value="">10年以上</option>
            </select>
        </div>

        <div class="list-body">
            <yd-infinitescroll :callback="loadList" ref="infinitescrollDemo">

                <yd-list theme="1" slot="list">

                    <router-link
                    :to="{name: 'DesignDetail', params: {id:item.id}}"
                    v-for="(item) of this.list"
                    :key="item.id"
                    class="list-item">
                        <div class="img-box">
                            <img :src="item.img_url.url" alt="">
                        </div>
                        <div class="item-word">
                            <h1 class="item-name">{{item.name}}</h1>
                            <p class="item-work"><span>{{item.work}}</span> <span class="years">设计经验： {{item.years}}年</span></p>
                            <p class="item-style">擅长设计风格：{{item.style}}</p>
                            <p class="item-idea">设计理念：{{item.title}}</p>
                            <div class="pic-box">
                                <div 
                                class="pic-item"
                                v-for="(item2) of item.items"
                                :key="item2.id"
                                ><img :src="item2.img_url.url" alt=""></div>
                            </div>
                        </div>
                      
                    </router-link>

                </yd-list>

                <!-- 数据全部加载完毕显示 -->
                <span slot="doneTip">啦啦啦，啦啦啦，没有数据啦~~</span>

                <!-- 加载中提示，不指定，将显示默认加载中图标 -->
                <img slot="loadingTip" src="path/img/loading.svg"/>

            </yd-infinitescroll>
        </div>
       
        <index-footer></index-footer>
  </div>
</template>

<script>
import axios from 'axios'
import { mapState } from 'vuex'
import IndexHeader from './../Index/components/Header'


import IndexFooter from './../Index/components/Footer'
export default {
    name: 'DesignList',
    components:{
        IndexHeader,
        
        IndexFooter,
    },
    data () {
        return {
            page: 1,
            pageSize: 12,
            list:[],
            active:[true,false],
            tab_item:''
            
        }
    },
    computed:{
        ...mapState(['baseUrl'])
    },
    mounted(){
        this.getPageInit()
        
    },
    methods:{
        tab(index){
            // for(let i = 0;i<=this.active.length;i++){
            //     this.active.splice(i,1,false);
            // }
            
            this.active[index]?
            this.active.splice(index,1,false):
            this.active.splice(index,1,true);
            // console.log(this.active)
            if(index ==0 ){
                this.page=1
                this.list=[]
                this.getPageInit()
                this.active.splice(1,1,false);
            }else if(index==1){
                this.page=1
                this.list=[]
                this.tab_item = '最热';
                this.tabSearch()
                this.active.splice(0,1,false);
            }
        },
        //产品列表
        getPageInit(){
            axios.get(this.baseUrl+'cms/design/all',
            {
                params:{
                    page:this.page,
                    size:this.pageSize,

                }
            }).then(this.pageInit)
        },
        pageInit(response){
            
            const _list = response.data.data;      
            this.list = [...this.list, ..._list];
            console.log(this.list)
            if (_list.length < this.pageSize || this.page == 3) {
                /* 所有数据加载完毕 */
                this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.loadedDone');
                return;
            }

            /* 单次请求数据完毕 */
            this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.finishLoad');

            this.page++;
            
        },
        tabSearch(){
            axios.get(this.baseUrl+'cms/design/all',
            {
                params:{
                    tab:this.tab_item,
                    page:this.page
                   
                }
            }).then(this.tabSearchSucc)
        },
        tabSearchSucc(response){
            const _list = response.data.data;      
            this.list = [...this.list, ..._list];

            if (_list.length < this.pageSize || this.page == 3) {
                /* 所有数据加载完毕 */
                this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.loadedDone');
                return;
            }

            /* 单次请求数据完毕 */
            this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.finishLoad');

            this.page++;
            console.log(this.list)
        },
        loadList() {
            // axios.get(this.baseUrl+'product/all_pc',
            // {
            //     params:{
            //         page:this.page,
            //         size:this.pageSize,

            //     }
            // }).then(this.loadListSucc);
            if(this.tab_item==''){
                this.getPageInit()
            }else if(this.tab_item=='最热'){
                this.tabSearch()
                // console.log(this.tab_item)
                // console.log(this.page)
            }
            
            },
        loadListSucc(response){
            
            // console.log(this.list)
        }
    }
}
</script>



<style lang="stylus" scoped>
// 1rem = html font-size = 50px

@import "~@styles/varibles.styl";
@import "~@styles/mixins.styl";
img 
    width 100%
.bg
    background white
    height 0.8rem 
    overflow hidden
    
.input
    margin 0.1rem 5%
    height 0.6rem
    position relative

    width 90%
   
.input>input 
    display block
    width 100%
    height 100%
    border-radius 0.6rem
    background #f2f2f2
    text-indent 0.4rem
   
.search 
    position absolute
    top: 0.1rem;
    right: 0.6rem;
    width 0.48rem
.tab-body 
    margin-top 0.2rem
    background white
    height 0.8rem
    display: -webkit-flex;
    display: flex;
    display: -webkit-box;
    display: -ms-flexbox;
    justify-content space-between
.item 
    height 0.5rem
    line-height 0.5rem
    padding 0 0.3rem
    border-radius   0.8rem
    margin 0.15rem 0
.active
    background #00a6ba
    color white 
.list-body
    margin-top 0.2rem
    margin-bottom 0.6rem
.list-item 
    background white
    overflow hidden
    margin-bottom 0.2rem
    display block
.img-box
    float left
    width 2.24rem
    height 2.8rem
    margin 0.2rem
    overflow hidden
.item-word
    float left
    margin-top 0.1rem
    margin-right 0.2rem
    width 4.5rem
.item-name 
    font-size 0.32rem
    color #333333
.item-work 
    margin-top 0.05rem
    padding-bottom 0.05rem
    border-bottom 1px solid #00a6ba
    color #666666
.years 
    margin-left 0.2rem
.item-style 
    color #666666
    margin-top 0.1rem
.item-idea
    color #666666
    margin-top 0.05rem   
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
.pic-box 
    margin-top 0.05rem
    margin-bottom 0.15rem
    overflow hidden
    height 1.44rem
.pic-item
    float left
    width 2rem 
    height 1.44rem 
    margin-right 0.2rem
</style>
